<!-- 
Search Item (keyword)
- description

Bid item 
- view item, current price, end time

Results:
item (click to view list of bidders/status), seller (click to view rating/comment page), start time, end time, base price, current price, current winner, bid button)
Monitor auctions in real time (who is bidding)

Activity History (same as Results)

Rating / check seller rating + comments (real time, sorted by posting time)

Recommendation
 -->

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page import="java.util.List" %>
<%@ page import="com.google.appengine.api.users.User" %>
<%@ page import="com.google.appengine.api.users.UserService" %>
<%@ page import="com.google.appengine.api.users.UserServiceFactory" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/base/minified/jquery-ui.min.css" type="text/css" />
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<script>
    $(document).ready(function() {    
    	loadActiveBids();
    	loadAllHistory();
    	getRecommendations();
    	
    	
       	
    	 
    	
    	//search
        $('#searchButton').click(function(event) {  
        	var keyword=$('#searchKeyword').val();
            $.post('/searchItem',{keyword:keyword},function(responseText) { 
                   $('#resultItems').html(responseText);  
            });
        });
        
    	
        
        $( "#bid-dialog" ).dialog({
            autoOpen: false,
            height: 450,
            width: 350,
            modal: true,
            buttons: {
              "Bid": function() {
                $("#bid-form").submit();
                //$( this ).dialog( "close" );
                //alert('Bid added successfully!');
              },
              Cancel: function() {
                $( this ).dialog( "close" );
              }
            }
          });
        
        $( "#seller-dialog" ).dialog({
            autoOpen: false,
            height: 600,
            width: 700,
            modal: true,
            buttons: {
              "Rate": function() {
                $("#seller-form").submit();
                //$( this ).dialog( "close" );
                //alert('Rated user successfully!');
                
              },
              Cancel: function() {
                $( this ).dialog( "close" );
              }
            }
          });
    });
    
    //bid handler
    function bidItem(that){
    	var aid= $(that).attr("id");
    	var hp = $(that).data('hp');
    	var bp = $(that).data('bp');
    	$("#auctionIdField").val(aid);
    	$("#highestPrice").text(hp);
    	$("#basePrice").text(bp);
    	$( "#bid-dialog" ).dialog( "open" );
    }
    
  	//view seller rating
	function viewRating (that){

		var userid= $(that).val();
		
		loadRatings(userid);
		
		$( "#seller-dialog" ).dialog( "open" );
	}
    
    function validateBidPrice(){
    	var input = $("#bidPriceField").val();
    	
    	if (input==""){
    		alert("Please enter something!");
    		return false;
    	}else if (!$.isNumeric(input)){
    		alert("Please enter a numeric value!");
    		return false;
    	}else if (parseFloat(input)< parseFloat($("#basePrice").text())){
    		alert("Please enter a value greater than the base price!");
    		return false;
    	}else if (parseFloat(input)<= parseFloat($("#highestPrice").text())){
    		alert("Please enter a value greater than the highest bid price!");
    		return false;
    	}else{
    		return true;
    	}
    	
    }
    
    function validateRating(){
    	var rate = $("#rate").val();
    	var comment = $("#commentField").val();
    	
    	if (rate=="null"){
    		alert("Please select a rating!");
    		return false;
    	}else{
    		return true;
    	}
    	
    }
    
    function poll() {
        $.post('/update',{},function() { 
		});
        //getRecommendations();
        //loadActiveBids();
        //loadAllHistory();
    }
    
    setTimeout(poll, 1000);
    //setInterval(poll, 1000);
    setInterval(poll, 3600000);
    
    function getRecommendations(){
		//recommend
            $.post('/recommend',{},function(responseText) { 
                   $('#recommendItems').html(responseText);  
            });
	}
	
	function loadActiveBids(){
		//display history
        $.post('/showHistory',{},function(responseText) { 
             $('#historyItems').html(responseText);  
   		});
		
	}
	
	function loadAllHistory(){
		//display all history
       	$.post('/showAllHistory',{},function(responseText) { 
               $('#allHistoryItems').html(responseText);  
     		});
	}
	
	function loadRatings(userid){
		$('#commentTable').html("");
		$.get('/viewComment',{sellerId:userid},function(response) { 
			
	           $('#sellerComment').text(response);  
	           $("#sellerId").val(userid);
	           
	           var json= jQuery.parseJSON(response);
	           if (json.length==0){
	        	   $(table).append($('<td>').text("No comments so far!!"));
	        	   
	           }else{
	        	   
	        	  var table = $('#commentTable');
	        	  
	        	  $('<tr>').appendTo(table)  
	 	            .append($('<td>').text("Author"))
	 	            .append($('<td>').text("seller id"))
	 	            .append($('<td>').text("post date"))
	 	            .append($('<td>').text("comment"));
	 	            
	        	  $.each(json, function (i, element) {
	           	   var row=$('<tr>');   
	   	            row.append($('<td>').text(element.buyerId))
	   	            .append($('<td>').text(element.sellerId))
	   	            .append($('<td>').text(element.dateCreated))
	   	            .append($('<td>').text(element.content));
	   	            $(table).append(row);
	           	  });
	           }
	                
	    	}); 
			
		//get rating!
	    $.get('/viewRating',{sellerId:userid},function(response) { 
	      	  $("#sellerRating").text(response);  
	    });
	}
    
</script>

<title>Buyer</title>
<!-- <link href="Site.css" rel="Stylesheet" type="text/css"/>
 -->
 </head>
  <body>


<div id="container" >
    <div id="wrapper">
        <div id="login" class="animate form">
            <form  autocomplete="on" > 
                <h1>Search Items</h1> 
                <p> 
                    <label for="itemDesc" > Item Keywords: </label>
                    <input id="searchKeyword" name="itemDesc" required="required" type="text" />
                </p>
                
                <p class="login button"> 
                    <input id = "searchButton" type="button" value="Search!" /> 
                    <p>*Note: Search without any keywords to view all items.</p>
                </p>
            </form>
        </div>
        <div id="result" class="animate form">
                <h1>Search Results</h1> 
                <div id = "resultItems"></div>
        </div>
         
         <h1>My Active Bids</h1><input type="button" value="Refresh" onclick="loadActiveBids()"></input>
         <!-- <form name="toRating" method="GET" action="/redirect">
		    <input type="hidden" name="page" value="history">
		    <A HREF="javascript:document.toHistory.submit()"><h1>My History</h1> </A>
		</form> -->
		<!-- <input id = "historyButton" type="button" value="Show History!" />  -->
		<div id = "historyItems"></div>
		
		<div id="allHistory" class="animate form" >
                <h1> My History </h1>   <input type="button" value="Refresh" onclick="loadAllHistory()"></input>
                <div id = "allHistoryItems"></div>
        </div>
        
        <div id="register" class="animate form" >
                <h1> My Recommendations</h1>   <input type="button" value="Refresh" onclick="getRecommendations()"></input>
                <!-- <input id = "recommendButton" type="button" value="Recommend Me!" /> 
                <p>*Note: Click "Recommend Me!" button to get recommendations!</p> -->
                <div id = "recommendItems"></div>
        </div>

        <form name="toLogout" method="GET" action="/redirect">
		    <input type="hidden" name="page" value="logout">
		    <A HREF="javascript:document.toLogout.submit()"><h1>Logout!</h1></A>
		</form>
        
    </div>
</div>  

<div id="bid-dialog" title="Bid Items">
 
  <form id="bid-form" action="bidItem" method="post" onsubmit="return validateBidPrice();">
  <fieldset>
  	<!-- <p><div id="auctionID"></div></p> -->
  	<label for="auctionId">Auction ID:</label>
  	<input type="text" name="auctionId" id="auctionIdField" value=""/>
  	<p>Base Price: <div id="basePrice"></div></p>
  	<p>Highest Bid: <div id="highestPrice"></div></p>
    <label for="bidPrice">Set Bid Price:</label>
    <input type="text" name="bidPrice" id="bidPriceField" value="" class="text ui-widget-content ui-corner-all" />
  </fieldset>
  </form>
</div>

<div id="seller-dialog" title="Seller Rating">
 
  <form id="seller-form" action="rate" method="post" onsubmit="return validateRating();">
  <fieldset>
  	<input type="button" value="Refresh" onclick="loadRatings($(sellerId).val())"></input>
  	Seller ID:<input type="text" name="sellerId" id="sellerId" value=""/>
  	<p>Seller Rating: <div id="sellerRating"></div></p>
  	<p>Seller Comments: <table border="1" id="commentTable"></table></p>
  	<p>Rate seller (1-10): 
  		<select name="rate" id="rate" value="rate" >
  					  <option value="null">Choose</option>
					  <option value="1">1</option>
					  <option value="2">2</option>
					  <option value="3">3</option>
					  <option value="4">4</option>
					  <option value="5">5</option>
					  <option value="6">6</option>
					  <option value="7">7</option>
					  <option value="8">8</option>
					  <option value="9">9</option>
					  <option value="10">10</option>
		</select>
  	</p>
    <label for="comment">Leave a Comment (Optional):</label>
    <input type="text" name="comment" id="commentField" value=""  />
  </fieldset>
  </form>
</div>

  </body>
</html>